<script lang="tsx">
  import {
    ElEmpty,
    ElCard
  } from 'element-plus'
  import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
  import { propTypes } from '@/utils/propTypes'

  import type { TableProps, TableColumn, Pagination, TableSetProps } from './types'
  import { CSSProperties } from 'vue'
  import { getSlot } from '@/utils/tsxHelper'


  export default defineComponent({
    name: 'Table',
    props: {
      data: {
        type: Array as PropType<Recordable[]>,
        default: () => []
      },
      cardBodyStyle: {
        type: Object as PropType<CSSProperties>,
        default: () => ({})
      },
      cardBodyClass: {
        type: String as PropType<string>,
        default: ''
      },
      cardWrapStyle: {
        type: Object as PropType<CSSProperties>,
        default: () => ({})
      },
      cardWrapClass: {
        type: String as PropType<string>,
        default: ''
      }
    },
    setup(props, {  slots }) {
      const mergeProps = ref<TableProps>({})
      const getProps = computed(() => {
        const propsObj = { ...props }
        Object.assign(propsObj, unref(mergeProps))
        return propsObj
      })
      return () => {
        const tableSlots = {}
        if (getSlot(slots, 'empty')) {
          tableSlots['empty'] = (...args: any[]) => getSlot(slots, 'empty', args)
        }
        if (getSlot(slots, 'append')) {
          tableSlots['append'] = (...args: any[]) => getSlot(slots, 'append', args)
        }

        return (
                          <div class="flex flex-wrap">
                            {unref(getProps)?.data?.length ? (
                                    unref(getProps)?.data.map((item) => {
                                      const cardSlots = {
                                        default: () => {
                                          return getSlot(slots, 'content', item)
                                        }
                                      }
                                      if (getSlot(slots, 'content-header')) {
                                        cardSlots['header'] = () => {
                                          return getSlot(slots, 'content-header', item)
                                        }
                                      }
                                      if (getSlot(slots, 'content-footer')) {
                                        cardSlots['footer'] = () => {
                                          return getSlot(slots, 'content-footer', item)
                                        }
                                      }
                                      return (<>
                                                <ElCard
                                                        shadow="hover"
                                                        class={unref(getProps).cardWrapClass}
                                                        style={unref(getProps).cardWrapStyle}
                                                        bodyClass={unref(getProps).cardBodyClass}
                                                        bodyStyle={unref(getProps).cardBodyStyle}
                                                >
                                                  {cardSlots}
                                                </ElCard>
                                              </>
                                      )
                                    })
                            ) : (
                                    <div class="flex flex-1 justify-center">
                                      <ElEmpty description="暂无数据" />
                                    </div>
                            )}
                          </div>


        )
      }
    }
  })
</script>